<template>
    <div class="detail-list">
        <div class="header_box">
            <!-- <CategoryHeader /> -->
            <category-header><span>目录</span></category-header>
            <div class="total-box">
                <p>
                    共<span>{{ infolist.length }}</span
                    >章
                </p>
                <i></i>
            </div>
        </div>

        <div class="list-content">
            <ul>
                <li v-for="(item, index) in infolist" :key="index">
                    <a @click="goNovel(item.uuid, index)">
                        <span>{{ item.title }}</span>
                        <!-- <span>琉璃珠子</span> -->
                    </a>
                </li>
            </ul>
        </div>

        <!-- <div class="content">
            <div class="novel-content" v-html="content"></div>
            <div class="footer">
                <button class="next">上一章</button>
                <button class="ml">目录</button>
                <button class="next">下一章</button>
            </div>
        </div> -->
    </div>
</template>

<script>
import CategoryHeader from "@/components/category-header.vue";
import { bookInfo } from "@/api/found";
export default {
    data() {
        return {
            content: `<div class="g-book"><div class="m-mb"><div class="m-content"><h1><span>第1章饯行</span></h1><p>2002年有三件大事，第一件是上海获得了世界博览会的举办权，第二件事是事业单位机构改革，第三件事是陆渐红失恋了。</p><p>陆渐红经过调岗，要离开熟悉的家乡小镇。</p><p>这一晚，陆渐红喝了很多酒，他想把自己灌醉，可是那酒却像是水一样，怎么喝也不醉，等一桌喝了八瓶，陆渐红才稍稍有了些醉意，在半醉半醒之间，陆渐红想起了前女友郎晶，不过酒桌上络驿不绝的敬酒很紧凑，没有给他太多的时间去回味。又喝了三瓶白酒，干掉了两箱啤酒，酒席才散，已经快十点了，走出饭店，陆渐红他想起了读初中的时候。初二的时候他留了一级，当他走出班级的时候，心情与现在差不多。</p><p>十月的夜晚已经有些凉，他拒绝了同事开车送他回家，自己走在已经不知道走过多少次的水泥路上，走了一阵子，酒劲上涌，天旋地转，陆渐红今晚至少喝了一斤半，再加上啤茶的冲击，陆渐红觉得舌根有些发硬，嘴巴一张，黄的白的全都出来了。靠在湖边地垂柳呕了一阵，直到把胃里吐得空空的，这才罢了口。陆渐红晃晃悠悠又走了几步，全身发软，干脆一屁股坐到草地上，远处有一对情侣紧紧依偎在一起，情到浓处动手动脚，这让陆渐红很是不爽，大喝一声“干什么的”，把那对小鸳鸯吓得作鸟兽散，陆渐红这才快意地长笑几声，笑到后面，那声音分明带着了些哭腔，就像是受伤的狼在嗥叫。</p><p>郎晶与陆渐红是初中时的同学，后来陆渐红考了一所中专，郎晶则读了高中，三年后，陆渐红毕业分到了农经站，郎晶则考上了无锡教育学院，今年刚刚毕业，就在镇政府对面的高河中学教音乐。两人前前后后谈了五六年的时间。距离产生美一点也没有错，这几年时间他们相聚在一起的时间并不多，每次相见都是来也匆匆去也匆匆，再加上郎晶父母的阻力，他们格外珍惜这段感情，可是万万没有想到的是，郎晶刚刚毕业，两人便产生了矛盾，在她刚参加工作的时候就分了手。</p><p>陆渐红默默地想着他们相聚时的点点滴滴，在草坪上坐了很久，夜已经深了，露水已经打湿了他的肩头，半晌陆渐红站了起来，向着镇政府大楼挥了挥手，又向高河中学挥了挥手，算是告别，然后拦了辆出租车回了家。</p><p>陆渐红的父亲已经去世了，母亲不识字，两个姐姐也早出嫁了，并没有人过问他的事，回到家里，连脚都没洗便爬上了床呼呼大睡。</p><div id="book-bottom"></div></div></div></div>`,
            infolist: [],
        };
    },
    methods: {
        async getInfo() {
            let data = {
                source_uuid: this.$route.query.source_uuid,
            };
            await bookInfo({ data }).then((res) => {
                // console.log(res);
                let result = res.data.catalog;
                this.infolist = result;
                // console.log(this.infolist);
            });
        },

        goNovel(uuid, index) {
            this.$router.push({
                path: "/novel",
                query: {
                    source_uuid: this.$route.query.source_uuid,
                    content_uuid: uuid,
                    content_index: index,
                },
            });
        },
    },
    created() {
        this.getInfo();
    },
    components: {
        CategoryHeader,
    },
};
</script>

<style lang="scss" scoped>
.detail-list {
    width: 100%;
    padding: 0 15px;
    position: relative;

    .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    overflow: hidden;
    .header_box {
        padding: 0 15px;
        width: 100%;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;

        .total-box {
            padding: 10px 0;
            border-bottom: 1px solid #999;
            display: flex;
            align-items: center;
            justify-content: space-between;

            p {
                font-size: 14px;
                color: #999;
            }
            i {
                display: block;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/paixu.png);
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    }

    .list-content {
        padding-top: 80px;
        margin-bottom: 20px;
        li {
            font-size: 14px;
            color: #313131;
            padding: 10px 0;
            border-bottom: 1px dashed #999;

            span {
                padding-right: 5px;
            }
        }
    }
}
</style>
